/***************************************************************************
 *   This is a part of the NextCAD Web APP.                                *
 *   Copyright (C) AMCAX, All rights reserved.                             *
 ***************************************************************************/

import { BaseCommand } from '@amcax/base';
import { DraggableModal } from '@app-base/common/components/draggable-modal/DraggableModal';
import { useState } from 'react';
import MaterialDetailPanel from './components/MaterialDetailPanel';
import MaterialTree from './components/MaterialTree';

function MaterialDialog({
  title,
  onClose,
}: {
  title: string;
  onClose: () => void;
}) {
  const [selectNode, setSelectNode] = useState<CmdMaterialSpace.TreeNode>();
  const [searchValue, setSearchValue] = useState('');
  const [treeUpdateKey, setTreeUpdateKey] = useState(new Date().valueOf());
  const [open, setOpen] = useState(true);

  const [activeTab, setActiveTab] = useState('property');
  return (
    <DraggableModal
      open={open}
      title={title}
      footer={null}
      closeIcon={null}
      width={850}
      onCancel={() => {
        setOpen(false);
        onClose();
      }}
    >
      <div className='min-w-[800px] h-[600px] bg-white flex'>
        <MaterialTree
          selectNode={selectNode}
          setSelectNode={setSelectNode}
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          treeUpdateKey={treeUpdateKey}
        />
        <MaterialDetailPanel
          activeTab={activeTab}
          setActiveTab={setActiveTab}
          key={`renderId-${selectNode?.id}`}
          selectNode={selectNode}
          onClose={onClose}
          setTreeUpdateKey={() => setTreeUpdateKey(new Date().valueOf())}
        />
      </div>
    </DraggableModal>
  );
}

export const cmdMaterial: BaseCommand = {
  id: 'CmdMaterial',
  label: '材料管理',
  icon: 'commands/tools/material-management',
  noHighlight: true,
  create: (label: string, onClose: () => void) => (
    <MaterialDialog
      title={'材料浏览器'}
      onClose={onClose}
    />
  ),
};
